<template>
<div>
  <el-card>
   <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>系统管理</el-breadcrumb-item>
  <el-breadcrumb-item>日志审计</el-breadcrumb-item>
</el-breadcrumb>
 <el-divider></el-divider>
  <el-tabs v-model="activeName" >
    <el-tab-pane label="登录日志" name="first">
      <el-table
      :data="tableData"
      style="width: 100%">
       <el-table-column
        prop="userName"
        label="姓名"
        width="180">
      </el-table-column>
       <el-table-column
        prop="passWord"
        label="密码"
        width="180">
      </el-table-column>
       <el-table-column
        prop="role"
        label="用户权限"
        width="180">
      </el-table-column>
        <el-table-column
        prop="date"
        label="登录时间"
        >
      </el-table-column>
      </el-table>
       <el-pagination 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage4"
      :page-sizes="[1, 2, 10, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total=" sizeList.length">
    </el-pagination>
   
    </el-tab-pane>
    <el-tab-pane label="系统日志" name="second">
       <el-table
       :data="errorDate"
       style="width: 100%"
       >
        <el-table-column
        prop="userName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="passWord"
        label="密码"
        width="180">
      </el-table-column>
       <el-table-column
        label="错误"
        width="250">
         <template slot-scope="scope">
           <p class="error">{{scope.row.error}}</p>
         </template>
      </el-table-column>
       <el-table-column
        prop="date"
        label="错误时间"
        >
      </el-table-column>
       </el-table>
        <el-pagination 
      @size-change="handleSizeChangeError"
      @current-change="handleCurrentChangeError"
      :current-page.sync="currentPageErr"
      :page-sizes="[1, 2, 10, 20]"
      :page-size="size1"
      layout="total, sizes, prev, pager, next, jumper"
      :total=" sizeList1.length">
    </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="操作日志" name="third">
       <el-table
       :data="actionData"
       style="width: 100%"
       >
        <el-table-column
        prop="userName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="passWord"
        label="密码"
        width="180">
      </el-table-column>
       <el-table-column
        prop="operation"
        label="操作"
        width="180">
      </el-table-column>
       <el-table-column
        prop="date"
        label="操作时间"
        >
      </el-table-column>
      
       </el-table>
      <el-pagination
      @size-change="handleSizeChangeAction"
      @current-change="handleCurrentChangeAction"
      :current-page.sync="currentPageAction"
      :page-sizes="[1, 2, 10, 20]"
      :page-size="size2"
      layout="total, sizes, prev, pager, next, jumper"
       :total=" sizeList2.length"
   >
   </el-pagination>
    </el-tab-pane>
  </el-tabs>
  
  </el-card>
  
</div>
</template>

<script>
export default {
  created() {
    this.getLogList()
    this.getActionLogList()
    this.getErrorLogList()
  },
  data() {
    return {
       activeName: 'first',
       tableData:[],
       errorDate:[],
       actionData:[],
       currentPage4: 1,
       currentPageErr:1,
       currentPageAction:1,
       size:1,
       size1:1,
       size2:1,
       page:0,
       page1:0,
       page2:0,
       sizeList:[],
       sizeList1:[],
       sizeList2:[]

    }
  },
  methods: {
    // 获取登录日志
      async getLogList(){
        const {data:res} = await this.$http.get('/logs/logslist')
        this.tableData=res.result.reverse()
        this.sizeList=res.result
      },
      async handleSizeChange(val) {
        this.size=val
        const {data:res} = await this.$http.get(`/logs/logslimit/${this.page}/${this.size}`)
        console.log(res);
        this.tableData=res.result.reverse()
        console.log(this.size)
      },
      async handleCurrentChange(val) {
         this.page=val-1
        const {data:res} = await this.$http.get(`/logs/logslimit/${this.page}/${this.size}`)
        this.tableData=res.result.reverse()
        console.log(res);
      },
       // 获取错误日志
       async getErrorLogList(){
          const {data:res} = await this.$http.get('/logs/errorlist')
      console.log(res)
       this.errorDate=res.result.reverse()
        this.sizeList1=res.result
       },
        async handleSizeChangeError(val) {
        this.size1=val
        const {data:res} = await this.$http.get(`/logs/errorlist/${this.page1}/${this.size1}`)
        console.log(res);
        this.errorDate=res.result.reverse()
        console.log(this.size1)
      },
      async handleCurrentChangeError(val) {
         this.page1=val-1
        const {data:res} = await this.$http.get(`/logs/errorlist/${this.page1}/${this.size1}`)
        this.errorDate=res.result.reverse()
        console.log(res);
      },
       // 获取操作日志
      async getActionLogList(){
      const {data:res} = await this.$http.get('/logs/actionlist')
      console.log(res)
      this.actionData =res.result.reverse()
       this.sizeList2=res.result
      },
       async handleSizeChangeAction(val){
          this.size2=val
           const {data:res} = await this.$http.get(`/logs/actionlist/${this.page2}/${this.size2}`)
            this.actionData =res.result.reverse()
      },
      async handleCurrentChangeAction(val){
        this.page2=val-1
          const {data:res} = await this.$http.get(`/logs/actionlist/${this.page2}/${this.size2}`)
            this.actionData =res.result.reverse()
      },
      
  },
}
</script>

<style scoped>
.el-pagination {
  margin-top: 30px;
}
.el-table{
  height: 55vh;
  overflow-y: scroll;
}
.error{
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>